<template>
<ContentWrap> 
    <el-space wrap>
        <el-button  type="primary" @click="$refs.roleDlg.open()" icon="plus"  plain>拉角色</el-button>
        <el-button :disabled="  this.sels.length===0 || load.del==true" type="danger" v-loading="load.del" @click="batchDel" icon="delete"  plain title="将角色移出岗位">移出岗位</el-button>
        <el-button :disabled="  this.sels.length === 0"
            icon="menu" @click="showRoleMenuBatch(sels, true)">设菜单</el-button>
    </el-space>
</ContentWrap>
<!--列表 PostRole 岗位角色关系表-->
<el-table ref="table" v-adaptive :data="tableDatas" @sort-change="sortChange" highlight-current-row v-loading="load.list" border @selection-change="selsChange" @row-click="rowClick" style="width: 100%;">
    
    <el-table-column type="selection" width="55"  />
    <el-table-column prop="rolename" label="角色" min-width="120" show-overflow-tooltip  fixed="left" col-type="String"/>
    <el-table-column prop="roleid" label="编号" min-width="120" show-overflow-tooltip   col-type="String"/>

    <el-table-column label="操作" width="140" fixed="right"> 
        <template #default="scope">
        <el-button @click="showRoleMenuBatch([scope.row], false)" icon="menu" title="菜单"/>
        <el-button @click="showRoleQx(scope.row)" icon="operation" title="权限"/>  
        </template>
    </el-table-column>
</el-table>
<el-pagination
    layout="slot,total"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
    :page-sizes="[10,20, 50, 100, 500]"
    :current-page="pageInfo.pageNum"
    :page-size="pageInfo.pageSize"
    :total="pageInfo.total"
    style="float:right;"
/> 


<mdp-dialog ref="roleToMenusSetDialog" width="70%" title="给角色选择菜单和按钮">
    <template #default="{ visible, data, dialog }">
      <role-to-menus-set ref="roleToMenusSet" :batch="data.batch" :visible="visible" :roleids="data.roleids"
        @close="dialog.close()" />
    </template>
  </mdp-dialog>

  <mdp-dialog ref="roleQxMngDialog" title="给角色选择权限列表" width="80%">
    <template #default="{ visible, data, dialog }">
      <role-qx-mng :visible="visible" ref="roleQxMng" :role="data.role" @close="dialog.close()" style="width:1200px;" />
    </template>
  </mdp-dialog>
  
  <mdp-dialog ref="roleDlg" title="选择角色" width="80%"> 
      <role-select subOpType='select' multiple  @select="onRoleSelect" /> 
  </mdp-dialog>
</template>

<script>

import { MdpTableMixin } from '@/components/mdp-ui/mixin/MdpTableMixin.js';
import * as PostRoleApi from '@/api/mdp/sys/postRole';
 import { mapState } from 'pinia'
import { useUserStore } from '@/store/modules/user'

import RoleToMenusSet from '@/views/mdp/menu/menuRole/RoleToMenusSet.vue';//新增修改明细界面
import RoleQxMng from '../roleQx/RoleQxMng.vue';//新增修改明细界面
import RoleSelect from '../role/Index.vue'
export default {
    name:'PostRoleMng',
    mixins:[MdpTableMixin],
    components: {  
        RoleQxMng, RoleToMenusSet,RoleSelect
    },
    computed: {
        ...mapState(useUserStore,['userInfo'])
    },
    watch:{
    },
    data() {
        return {
            menuDefId:'',//menu_def.id 菜单表菜单编号，用于按钮权限判断
            menuDefName:'岗位角色关系表',//menu_def.name 功能名称，用于导出excel等文件名
            pkNames:["postId", "roleid"],//表格主键的java属性名称，驼峰命名，默认为id,支持多主键
            currOpType:'mng',//表格 mng-综合管理具有最大权限，所有按钮可动、detail-只看不能操作
            filters:{//查询参数

            },
            defaultFilters:{//默认查询参数,第一次打开界面的时候用到，恢复默认值的时候用到

            },

            //增删改查(含批量)接口
            apis:{
                list: PostRoleApi.listPostRole,  
                batchDel: PostRoleApi.batchDelPostRole, 
            }
        }
    },
    methods: {
         //页面初始化需要配置的特殊逻辑写这里
          initCurrData(){
             this.searchTableDatas();
          },

          /**
           * 检查参数是否满足调用后台接口的条件
           *
           * @param params 提交给后台的参数池,map类型
           * @returns true / false
           */
          preQueryParamCheck(params){
              return true;
          },

          //页面数据加载完后需要对数据进行加工处理的
          afterList(tableDatas,isOk,apiName){

          },

          /**
           * 对修改的字段进行判断，返回false ,将取消更新数据库
           * @param {*} row 当前选中的行
           * @param {*} fieldName 修改的字段名
           * @param {*} $event 修改后的值
           * @param {*} params 将要提交服务器的参数
           * @returns true/false 返回false ,将取消更新数据库
           */
          editSomeFieldsCheck(row,fieldName,$event,params){
              if(this.currOpType=='add'||this.currOpType=='detail'){
                  return false;
              }
              params[fieldName]=$event
              return true;
          },
          showRoleMenuBatch: function (roles, batch) {

            var roleids = roles.map(i => i.roleid);
            this.$refs['roleToMenusSetDialog'].open({ roleids: roleids, batch: batch })
        },
        //显示设置权限界面
        showRoleQx: function (row) {
            this.$refs['roleQxMngDialog'].open({ role: row })
        },
        onRoleSelect(roles){
            this.load.edit=true    
            var params=roles.map(k=>{return {roleid:k.roleid,postId:this.params.postId}})
            PostRoleApi.batchAddPostRole(params).then((res) => {
                this.load.edit=false
                var tips=res.tips;
                if(tips.isOk){ 
                    this.$emit('submit');//  @submit="afterAddSubmit"
                    this.searchTableDatas()
                    this.$refs.roleDlg.close();
                }
                this.$message({ message: tips.msg, type: tips.isOk?'success':'error' }); 
            }).catch(() => this.load.edit=false); 
        }
    },
    mounted() {

    }
}

</script>

<style scoped>
</style>